<template>
  <view class="content">
    <swiper class="swiper" vertical="true" :current="indexs" @change="onChange" @touchstart="onTouchstart"  :disable-touch="false"
      :style="{ height: 'calc(100vh - ' + contentTop + ')' }">
      <!-- 推荐 -->
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="video-box" @click="isplay(index)">
          <!-- 播放中视频 -->
          <video class="video-item" v-if="indexs == index || index == indexs + 1" :data-indexs="index"
            :id="'myVideo' + index" :ref="'myVideo' + index" :controls="false" :play-strategy='0' :http-cache="true"
            :autoplay="index == indexs ? true : 0" @timeupdate='videoTimeUpdateEvent' @ended="endvideo" object-fit="fill"
            loop :src="encodeURI(decodeURI(item.contentUrl))"></video>
        </view>
        <!-- 全屏播放 -->
        <!-- <view @click="quanping(index)" class="quanping">全屏观看</view> -->
        <view v-if="!is_plays" @click="isplay(index)" class="bofang">
          <image src="https://wechat-pictures-1301970825.file.myqcloud.com/pay.png"></image>
        </view>
      </swiper-item>
      <swiper-item></swiper-item>
    </swiper>
    <!-- <view v-if="zhezhiao" @touchstart="fingerstart" @click="set_zhezhao()" class="xiaoshou">
      <image mode="widthFix" src="https://wechat-pictures-1301970825.file.myqcloud.com/shanghuatishi.png"></image>
    </view> -->

   <view class="gif-login" v-if="loading">
      <!-- <image mode="widthFix" src="../../../static/image/gif.gif"></image> -->
    </view>
  </view>
</template>
<script>
import { trackingHost } from "@/common/config";
export default {
  name: "video-list",
  props: {
    videoParams: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  watch: {
    videoParams: function (val, oldVal) {
      if (val) {
        this.getList(val)
      }
    },
  },
  data() {
    return {
      // percent: 0,
      zhezhiao: false, //引导状态
      list: [], //视屏列表
      videoContext: {}, //当前播放视屏item
      loading: true, //视视屏加载动画
      indexs: 0,  //当前视屏播放下标
      is_plays: true, //播放视屏
      contentTop: uni.getStorageSync('menuInfo').contentTop, //胶囊高度
      videoDuration: 0, // 视频停留播放时间
    };
  },
  created() {
    this.is_haudong();//执行引导
  },
  mounted() { },
  methods: {
    videoPage({event, cid, element, st}) {
      const { unionid, openid } = uni.getStorageSync("userInfo");
      const storeId = uni.getStorageSync("storeId");
      const params = {
        oid: openid,
        uid: unionid,
        sid: storeId,
        ts: Date.parse(new Date()) / 1000,
        event,
        page: "videoPage",
        cid,
        element,
        st,
      }
      this.$request("event-tracking/user", { host: trackingHost, params })
        .catch(() => { })
    },
    //视屏观看引导
    is_haudong() {
      var huadong = uni.getStorageSync('haudong');
      if (huadong) {
        this.zhezhiao = false;
      } else {
        this.zhezhiao = true;
      }
    },
    //视频播放完成
    endvideo() {
      // var _this = this;
      // //单个视屏播放次数
      // _this.videoData.num = _this.videoData.num + 1
      // //上传观看完成视频
      // this.tongbu(true)
    },
    videoTimeUpdateEvent(e) {
      this.videoDuration = Math.ceil(e.detail.currentTime);
      if (this.loading) {
        this.loading = false;
      }
    },
    //滑动取消引导
    fingerstart() {
      this.set_zhezhao();
    },
    //取消引导
    set_zhezhao() {
      this.zhezhiao = false;
      uni.setStorageSync('haudong', true);
    },
    isplay(id) {
      this.videoContext = uni.createVideoContext(`myVideo${id}`, this);
      this.is_plays = !this.is_plays;
      if (this.is_plays) {
        this.videoContext.play();
      } else {
        this.videoContext.pause();
      }
    },
    onChange(e) {
      // this.percent = 0;
      // 关闭所有视频播放
      this.list.map((k, v) => {
        uni.createVideoContext(`myVideo${v}`, this).pause();
      })
      const index = e.detail.current;
      uni.createVideoContext(`myVideo${index}`, this).play();
      this.is_plays = true;
      this.indexs = index;
      this.loading = true;
      // 当前index超出总数不调曝光埋点
      if (index < this.list.length) {
        this.videoPage({event: "impression", cid: this.list[index].contentId});
      }
      this.videoPage({event: "sessionTime", cid: this.list[this.prevIndexs].contentId, st: this.videoDuration })
      this.videoDuration = 0; // 切换后重置视频播放时间变量
      // 当前index超出总数不显示调查框
      if (this.indexs < this.list.length) {
        this.$emit("onShowInvestigatePopup", this.list[this.indexs].contentId);
      }
      this.updateTaskProgress();
    },

    onTouchstart(e) {
      this.prevIndexs = this.indexs;
    },

    // 上报任务状态
    updateTaskProgress() {
      // 如果往回切视频，则当前视频不上报
      if(this.prevIndexs > this.indexs) {
        return;
      }
      const prevItem = this.list[this.prevIndexs];
      if (prevItem.watched) return; // 上报过的不在上报
      const { activityId, taskId, taskType } = this.videoParams;
      const { contentId } = prevItem;

      this.$request("marketing/task/progress", {
        params: {
          activityId,
          contentId,
          taskId,
          taskType,
        }
      }).then(data => {
        prevItem.watched = true;
        this.$emit("onUpdateTaskProgress");
      })
      .catch(() => {})
    },
    getList() {
      this.$request("marketing/task/content", { method: "get", params: this.videoParams })
        .then(data => {
          this.list = data;
          // 找出将要观看的视频index
          const willWatchIndex = data.findIndex(item => !item.watched)
          this.indexs = willWatchIndex; // 没有为-1
          // const videoContext = uni.createVideoContext('myVideo0', this);
          // videoContext.play()

          this.videoPage({event: "impression", cid: data[willWatchIndex].contentId})
        })
        .catch(() => { })
    },
  }
}
</script>

<style lang="scss" scoped>
.bofang {
  width: 100upx;
  height: 100upx;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 10000;
}

.bofang image {
  width: 100%;
  height: 100%;
}

.quanping {
  border-radius: 40upx;
  border: 2upx solid #FFFFFF;
  color: #FFF8F4;
  padding: 10upx 20upx;
  position: fixed;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%);
  z-index: 1000;
  font-size: 30upx;
}

video {
  background-color: #42445A;
}

.pinjia {
  width: 100%;
  height: 700upx !important;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 0 30upx;
  overflow: auto !important;
}

.pinjia .pinjia-count {
  font-size: 26upx;
  color: #333333;
  font-weight: 600;
  width: 100%;
  text-align: center;
  line-height: 100upx;
}

.pinjia .set {

  width: 100%;
  height: 150upx;
  position: fixed;
  display: flex;
  left: 0;
  box-sizing: border-box;
  padding: 0 30upx;
  align-items: center;
  background-color: #FFFFFF;
  z-index: 100;
  color: #000000;
  bottom: 100upx;
}

.pinjia .set .input {
  background-color: #F6F6F6;
  width: 100%;
  border-radius: 32upx;
  display: flex;
  height: 64upx;
  align-items: center;
}

.pinjia .set input {
  flex: 1;
  color: #000000;
}

.pinjia .set .input .xie {
  margin: 0 20upx;
}

.content {
  padding: 0;
  margin: 0;
}

.swiper {
  width: 750upx;
  background-color: #000000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}


.city-icon {
  width: 36upx;
  height: 36upx;
  display: inline-block;
  vertical-align: middle;
  margin: 0upx 10upx;
}

.city-name {
  position: absolute;
  bottom: 314upx;
  left: 30upx;
  color: #fff;
}

.city-title {
  position: absolute;
  bottom: 220upx;
  left: 30upx;
  width: 532upx;
  height: 84upx;
  font-size: 28upx;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-tx {
  position: absolute;
  bottom: 750upx;
  left: 644upx;
  width: 88upx;
  height: 88upx;
  background-color: #fff;
  border-radius: 44upx;
}

.user-tx-img {
  width: 76upx;
  height: 76upx;
  margin-left: 6upx;
  margin-top: 6upx;
  vertical-align: middle;
}


.pl_content {
  width: 100%;
  padding-left: 76upx;
  margin-bottom: 54upx;
}

.pl_content .contents {
  font-size: 28upx;
  color: #333333;
  line-height: 40upx;
  word-wrap: break-word;
  word-break: normal;
}

.pl_content .time {
  font-size: 20upx;
  color: #999999;
  margin-top: 24upx;
}

.pl_user_img {
  display: flex;
  align-items: center;
}

.pl_dz {
  margin-left: 25upx;
}


.pl_user_img image {
  width: 56upx;
  height: 56upx;
  border-radius: 50%;
  border: 1upx solid red;
  margin-right: 10upx;
}

.pl_user_info {
  display: flex;
  width: 100%;
  height: 80upx;
  justify-content: space-between;
  align-items: center;
}


.yujiazai {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.gif-login {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: gif-login-donghua 3s forwards;
}

@keyframes gif-login-donghua {
  0% {}

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.gif-login image {
  width: 50%;
}

.video-box {
  width: 100vw;
  height: 100%;
}

.video-item {
  height: 100%;
  width: 100%;
}

.xiaoshou {
  position: fixed;
  bottom: 50%;
  z-index: 10000;
  width: 50%;
  height: 100upx;
  left: 50%;
  transform: translate(-50%);
}

.xiaoshou image {
  width: 100%;
  height: 100%;
}

// .jiazai {
//   height: 100vh;
//   width: 100vw;
//   position: fixed;
// }
</style>
